<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			var a=0;
			function fun(){ 
				var si=setInterval(function(){
				document.getElementById("div1").appendChild(document.createTextNode("|"));
				a++;
				document.getElementById("p1").innerHTML=a+"%";
				if(a==100){
					clearInterval(si);
				}
			},200);
			}  
			
		</script>
	</head>
	<body> 
		<div id="div1">进度条|</div>
		<p id = "p1">0%</p>
		<button onclick="fun()">开始</button>
	</body>
</html>
 